<template>
  <div>
    <!-- 封装上传图片 -->
    <el-form-item label="图片" label-width="120px">
      <div class="upload_box">
        <h3 class="upload_plus">+</h3>
        <!-- 3.3绑定change事件 -->
        <input  type="file" class="upload_input" @change="changeFile" />
        <!--3.2 为了防止图裂，所以就添加v-if="imgUrl" -->
        <!-- 3.1 绑定图片 -->
        <img v-if="imgUrl" class="upload_img" :src="imgUrl" alt />
      </div>
    </el-form-item>
  </div>
</template>

<script>
// 引入path
import path from "path";
// 引入alert
import { errorAlert } from "../utils/alert";
export default {
  data() {
    return {
      imgUrl: ""
    };
  },
  methods: {
    // 修改图片地址---传一个地址
    changeImg(url){
      this.imgUrl = url
    },
    //4.1 上传文件---
    changeFile(e) {
      // console.log(e);
      // event-->target-->files是文件
      //4.2 得到了文件
      let file = e.target.files[0];
      // console.log(file);

      // console.log(url);

      // 4.5 判断文件大小
      //  1M=1024KB 1KB=1024B  1B=8b  file.size B
      if (file.size > 2 * 1024 * 1024) {
        errorAlert("图片最大不超过2M");
        return;
      }
      // 4.5 判断图片格式
      // 第一种方式：
      // let houzhui=file.name.slice(file.name.lastIndexOf("."))
      // console.log(houzhui);
      // 第二种方式
      let arr = [".jpeg", ".png", ".gif", ".jpg"];
      let extname = path.extname(file.name);
      // console.log(extname);
      if (!arr.includes(extname)) {
        errorAlert("请上传正确的图片格式！");
        return;
      }
      // 4.3 根据文件生成一个图片地址，赋值给imgUrl
      this.imgUrl = URL.createObjectURL(file);
      // 通知父组件----将文件传回去-- <upload-img @getFile="form.img = $event" v-if="status.isshow"></upload-img>
      this.$emit("getFile", file);
    }
  }
};
</script>

<style scoped lang="less">
.upload_box {
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  position: relative;
}
.upload_plus {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
}
.upload_input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.upload_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>